#app{
    padding:10px 20px;
}
#app>div{
    margin-bottom:60px;
}
.date{
    font-size:14px;
}
.author{
    margin-right:10px;
}
.desc{
    color:#bbb;
}
.task-info{
    background: #f5f5f5;
    padding:10px;
    margin:10px 0;
}
.download{
    background: #f5f5f5;
    padding:10px;
    margin:20px 0;
}
.file-info{
    flex:1;
}
.file-name{

}
.file-size{
    font-size:12px;
}
.user-info-content{
    margin-top:30px;
}
.link{
    color:#417792;
}
.user-info{
    margin:10px 0;
}
.head_pic{
    width:40px;
    height:40px;
    border-radius:50%;
}
.nickname{
    margin-left:10px;
}
.user-info>div{
    flex:1;
}
.user-info-more{
    flex:0 0 10px !important;
}
.upload_pic{
    margin:10px 0;
    margin-right:10px;
    position:relative;
}
.bottom-btn{
    position:fixed;
    background:#fff;
    border:1px solid #ececec;
    bottom:0;
    left:0;
    right:0;
    /*height:40px;*/
    padding:10px 20px;
}
.bottom-btn button{
    width:100%;
    height:40px;
    background:#F54536;
    color:#fff;
    border:none;
    border-radius:5px;
}
.bottom-btn>div{
    flex:1;
    border-right:1px solid #ececec;
    color:#DE4440;
}
.bottom-btn>div:nth-last-child(1){
    border:none;
}
.close{
    position:absolute;
    border-radius:50%;
    overflow:hidden;
    top:0;
    right:0;
}

.screen{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(110,107,107,0.5);
    z-index:10;
}

@keyframes bottom-to-up {
    from {bottom:-400px;}
    to {bottom:0;}
}

.screen .comment{
    width:100%;
    height:400px;
    border-radius:5px 5px 0 0;
    position:absolute;
    bottom:0;
    background:#fff;
    border:1px solid #ececec;
    left:0;
    right:0;
    animation:bottom-to-up 0.2s;
    padding:10px;
}
.screen .comment .btn{
    position:absolute;
    bottom:10px;
    left: 10px;
    right:10px;

}
.screen .comment textarea{
    width:100%;
    height:150px;
    border-radius:5px;
    border:1px solid #ececec;
}


.screen .comment .btn button{
    height:40px;
    color:#fff;
    background:#F54536;
    width:100%;
    border:none;
}

input[type="range"] {
    -webkit-appearance: none; /*去除默认样式*/
    /*margin-top: 42px;*/
    background-color: #ebeff4;
    width: 100% !important;
    border:1px solid #ebeff4;
    /*background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat;*/
    -webkit-appearance: none;
    height:4px;
    padding: 0;
    border: none;
    background-size: 10% 100%;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;/*去除默认样式*/
    cursor: default;
    top: 0;
    height: 20px;
    width: 20px;
    transform: translateY(0px);
    background: #fff;
    border-radius: 50%;
    border: 5px solid #006eb3;
}

